<template>
	<view>
		<view class="content-wrap tp-w690">

			<view class="input-wrap">
				<view class="l-wrap">订单</view>
				<view class="r-wrap" @click="handleGoInvoiceList">
					<input class="input ipt" disabled type="text" :value="orderID" placeholder="请选择" />
					<uni-icons class="icon" type="arrowright" size="20" color="#999"></uni-icons>
				</view>
			</view>

			<view class="input-wrap">
				<view class="l-wrap">发票类型</view>
				<view class="r-wrap" @click="selectInvoiceTypeList">
					<input class="input ipt" disabled type="text" :value="invoiceType.name" placeholder="请选择" />
					<uni-icons class="icon" type="arrowright" size="20" color="#999"></uni-icons>
				</view>
			</view>


			<view class="input-wrap">
				<view class="l-wrap">抬头类型</view>
				<view class="r-wrap">
					<view class="choose" @click="handleChooseType(0)">
						<uni-icons v-if="curType==0" class="choose-icon" type="circle-filled" color="#FFAF3C" size="22"></uni-icons>
						<uni-icons v-else class="choose-icon" type="circle" color="#999" size="22"></uni-icons>
						<text style="margin-right: 30rpx;">个人或事业单位</text>
					</view>
					<view class="choose" @click="handleChooseType(1)">
						<uni-icons v-if="curType==1" class="choose-icon" type="circle-filled" color="#FFAF3C" size="22"></uni-icons>
						<uni-icons v-else class="choose-icon" type="circle" color="#999" size="22"></uni-icons>
						<text>企业</text>
					</view>
				</view>
			</view>

			<view class="input-wrap">
				<view class="l-wrap">发票抬头</view>
				<view class="r-wrap">
					<input class="input" type="text" v-model="invoiceUp" value="" placeholder="请输入" />
				</view>
			</view>

			<view class="input-wrap">
				<view class="l-wrap">身份证号/税号</view>
				<view class="r-wrap">
					<input class="input" type="text" v-model="shuiHao" value="" placeholder="请输入" />
				</view>
			</view>

			<view class="input-wrap">
				<view class="l-wrap">发票内容</view>
				<view class="r-wrap">
					<input class="input" type="text" v-model="context" value="" />
				</view>
			</view>

			<!-- #ifdef MP-WEIXIN -->
			<view class="input-wrap">
				<view class="l-wrap">邮寄地址</view>
				<picker mode="region" @change="bindPickerChange">
					<view class="r-wrap">
						<input class="input" type="text" :value="address" placeholder="请选择" disabled />
					</view>
				</picker>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="input-wrap" @click="showMulLinkageThreePicker">
				<view class="l-wrap">邮寄地址</view>
				<view class="r-wrap">
					<input class="input" type="text" :value="address" placeholder="请选择" disabled />
				</view>
			</view>
			<!-- #endif -->

			<view class="input-wrap">
				<view class="l-wrap">详细地址</view>
				<view class="r-wrap">
					<input class="input" type="text" v-model="addressDetail" value="" placeholder="例：小区、楼层、门牌号" />
				</view>
			</view>

			<view class="input-wrap">
				<view class="l-wrap">邮箱</view>
				<view class="r-wrap">
					<input class="input" type="text" v-model="email" value="" placeholder="请输入" />
				</view>
			</view>

		</view>

		<view @click="common" class="common-btn">提交</view>
		<!-- #ifdef H5 -->
		<!-- 三级城市联动选择器 -->
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
		<!-- #endif -->
	</view>
</template>

<script>
	// #ifdef H5
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'; // 三级城市选择联动
	import cityData from '@/common/city.data.js';
	// #endif
	export default {
		components: {
			// #ifdef H5
			mpvueCityPicker
			// #endif
		},
		data() {
			return {
				curType: 0, //抬头类型（0个人或事业单位1企业）
				orderID: '', // 	订单编号
				invoiceTypeList: [], // 发票类型列表
				invoiceType: {}, // 发票类型
				invoiceUp: '', // 	发票抬头
				context: '明细', // 发票内容
				orderType: '0', // 订单类型
				address: '', // 	邮寄地址
				addressDetail: '', // 详细地址
				email: '', // 邮箱
				shuiHao: '', //	税号

				// #ifdef H5
				// 三级联动
				pickerText: '', // 三级联动得到的值
				pickerViewText: {}, // 页面需要的值 
				province: '', // 省
				city: '', // 市
				area: '', // 区
				mulLinkageTwoPicker: cityData, // 导入的数据
				cityPickerValueDefault: [0, 0, 1], // 三级联动选取的值
				themeColor: '#007AFF', // 确定的主题色
				// #endif
			};
		},
		onLoad() {
			this.initChoosedInvoice()
			this.getInvoiceTypeList() // 获取发票类型
		},
		onShow() {
			this.getChoosedInvoice()
		},
		methods: {
			// 提交
			common() {
				var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				if (!this.orderID) return uni.showToast({
					title: '请选择订单',
					icon: 'none'
				});
				if (!this.invoiceType.id) return uni.showToast({
					title: '请选择发票类型',
					icon: 'none'
				});
				if (!this.invoiceUp.trim()) return uni.showToast({
					title: '请输入发票抬头',
					icon: 'none'
				});
				if (!this.shuiHao.trim()) return uni.showToast({
					title: '请输入税号',
					icon: 'none'
				});
				if (!this.context.trim()) return uni.showToast({
					title: '请输入发票内容',
					icon: 'none'
				});
				if (!this.address) return uni.showToast({
					title: '请选择邮寄地址',
					icon: 'none'
				});
				if (!this.addressDetail.trim()) return uni.showToast({
					title: '请输入详细地址',
					icon: 'none'
				});
				if (!this.email.trim()) return uni.showToast({
					title: '请输入邮箱',
					icon: 'none'
				});
				if (!reg.test(this.email.trim())) return uni.showToast({
					title: '请输入正确的邮箱',
					icon: 'none'
				});
				this.$http.post(this.$api.submitInvoice, {
					orderNo: this.orderID,
					invoiceType: this.invoiceType.id,
					lookUpType: this.curType,
					invoiceUp: this.invoiceUp,
					context: this.context,
					orderType: this.orderType,
					address: this.address,
					addressDetail: this.addressDetail,
					email: this.email,
					shuiHao: this.shuiHao,
				}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					}
				})
			},
			// #ifdef H5
			// 取消时的停靠的数据,下次打开在这个位置
			onCancel(e) {
				console.log(e)
			},
			// 三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			// 处理联动数据
			onConfirm(e) {
				this.pickerText = JSON.stringify(e)
				this.pickerViewText = JSON.parse(this.pickerText)
				let str = this.pickerViewText.label.split('-')
				this.address = str.join('')
			},
			// #endif
			// 选位置
			bindPickerChange(e) {
				// console.log(e);
				let arr = []
				arr = e.detail.value
				this.address = arr.join('')
			},
			// 获取发票类型
			getInvoiceTypeList() {
				this.$http.get(this.$api.invoiceTypeList).then(res => {
					if (res.code === 200) {
						this.invoiceTypeList = res.data
					}
				})
			},

			// 选取 发票类型
			selectInvoiceTypeList() {
				let _this = this
				let arr = []
				this.invoiceTypeList.forEach(item => {
					arr.push(item.name)
				})
				uni.showActionSheet({
					itemList: arr,
					success: function(res) {
						// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						_this.invoiceTypeList.forEach(item => {
							if (item.name == arr[res.tapIndex]) {
								_this.invoiceType = item
							}
						})
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			// 切换抬头类型
			handleChooseType(type) {
				this.curType = type
			},
			// 去订单列表
			handleGoInvoiceList() {
				uni.navigateTo({
					url: './invoiceList'
				});
			},
			// 获取订单号
			getChoosedInvoice() {
				this.orderID = this.$store.getters.getChoosedInvoice || ''
				this.orderType = this.$store.getters.getChoosedOrderType || ''
			},
			// 初始化订单号
			initChoosedInvoice() {
				this.$store.commit('delChoosedInvoice')
				this.$store.commit('delChoosedOrderType')
			}
		},
		onBackPress() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel(); // picker废除 性能优化
				return true;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content-wrap {
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 0 30rpx;
		box-sizing: border-box;

		.input-wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			font-size: 30rpx;
			border-bottom: 1px solid #ebebeb;

			&:last-child {
				border: none;
			}

			.l-wrap {}

			.r-wrap {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.choose-icon {
					margin-right: 20rpx;
				}

				.icon {
					margin-left: 10rpx;
					margin-right: -15rpx;
				}

				.input {
					text-align: right;
					padding-right: 15rpx;
				}

				.ipt {
					text-align: right;
					padding-right: 0;
				}
			}
		}
	}

	.common-btn {
		box-shadow: none;
		margin-top: 100rpx;
		width: 580rpx;
	}
</style>
